<template>
	<el-dialog v-model="dialogVisible" :title="id ? '编辑班级' : '新建班级'">
		<el-form label-width="100">
			<el-form-item label="班级名称" required>
				<el-input placeholder="请输入班级名称" v-model="form.className"></el-input>
			</el-form-item>
			<el-form-item label="授课模式">
				<el-radio-group v-model="form.teachingMethod">
					<el-radio v-for="item in dicts.crm_teaching_method" :key="item.k" :label="item.v">
						{{ item.k }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="科目">
				<el-select placeholder="请选择科目" v-model="form.subjectId">
					<el-option v-for="subject in subjectList" :key="subject.id" :value="subject.id"
						:label="subject.subjectName"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="满班人数">
				<el-input placeholder="请输入满班人数" v-model.number="form.fullPeople"></el-input>
			</el-form-item>
			<el-form-item label="课时">
				<el-input placeholder="请输入课时" v-model.number="form.classHour"></el-input>
			</el-form-item>
			<el-form-item label="开班时间">
				<el-date-picker v-model="form.chooseDays" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
					range-separator="至" start-placeholder="开班时间" end-placeholder="结课时间" :disabled-date="disabledDate"
					@change="studyTime" />
			</el-form-item>
			<el-form-item label="主讲老师">
				<el-input placeholder="请选择主讲老师" v-model="form.mainTeacherUsername" disabled>
					<template #append>
						<el-button icon="Search" @click="btnDialog('mainTeacher')"></el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="助教老师">
				<el-input placeholder="请选择助教老师" v-model="form.assistTeacherUsername" disabled>
					<template #append>
						<el-button icon="Search" @click="btnDialog('assistTeacher')"></el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="学管老师">
				<el-input placeholder="请选择学管老师" v-model="form.manageTeacherUsername" disabled>
					<template #append>
						<el-button icon="Search" @click="btnDialog('manageTeacher')"></el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="授课课时">
				<el-checkbox-group v-model="form.teachingDay as string[]" size="small">
					<el-checkbox-button v-for="day in days" :key="day.key" :label="day.key">
						{{ day.value }}
					</el-checkbox-button>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="选择时间段">
				<el-time-select v-model="form.teachingTime[0]" placeholder="开始时间" start="20:00" step="00:15" end="21:00"
					style="width: 45%;" />
				<span style="margin: 0 10px;">至</span>
				<el-time-select v-model="form.teachingTime[1]" placeholder="结束时间" start="22:00" step="00:15" end="23:00"
					style="width: 45%;" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="onSubmit">确认</el-button>
		</template>
		<teachDialog v-model="teachDialogVisible" @addSuccess="onAddSuccessUser"></teachDialog>
	</el-dialog>
</template>

<script setup lang="ts">
import { getClassGetApi, postClassAOUApi } from '@renderer/api/class';
import { useDicts } from '@renderer/composables/dicts';
import { ClassForm } from '@renderer/interface/class';
import { ref, watch } from 'vue';
import teachDialog from './teachDialog.vue'
import { getSubjectPageApi } from '@renderer/api/subject';
import { SubjectItem } from '@renderer/interface/subject';

// 父组件传参
const props = defineProps<{
	id: string
}>()
// 自定义事件
const emits = defineEmits(['addSuccess'])
// 接收父组件的 v-model
const dialogVisible = defineModel({ default: false })

/* 表单数据 */
const formValue = (): ClassForm => ({
	id: '',
	className: '',
	teachingMethod: '',
	subjectId: '',
	fullPeople: '',
	mainTeacherId: '',
	assistTeacherId: '',
	manageTeacherId: '',
	mainTeacherUsername: '',
	assistTeacherUsername: '',
	manageTeacherUsername: '',
	classHour: '',
	beginDate: '',
	endDate: '',
	teachingDay: [],
	teachingTime: ['', ''],
	status: 0,
	chooseDays: ['', '']
})
const form = ref<ClassForm>(formValue())
const { dicts } = useDicts(['crm_teaching_method'])
// 禁用的日期
const disabledDate = (time: Date) => {
	return time.getTime() < Date.now()
}
// 开班日期 & 结课日期
const studyTime = () => {
	form.value.beginDate = form.value.chooseDays[0]
	form.value.endDate = form.value.chooseDays[1]
}
// 授课星期
const days = [
	{ key: '1', value: '星期一' },
	{ key: '2', value: '星期二' },
	{ key: '3', value: '星期三' },
	{ key: '4', value: '星期四' },
	{ key: '5', value: '星期五' },
	{ key: '6', value: '星期六' },
	{ key: '7', value: '星期日' },
]
// 选择科目
const subjectList = ref<SubjectItem[]>([])
const getSubjectData = async () => {
	const { code, data } = await getSubjectPageApi({ current: 1, size: 100 })
	if (code !== '200') return

	subjectList.value = data.records
}

// 根据id获取详情数据
const getFormData = async () => {
	const { code, data } = await getClassGetApi(props.id)
	if (code !== '200') return

	form.value = data
	form.value.chooseDays = [data.beginDate, data.endDate]
	form.value.teachingDay = (data.teachingDay as string).split(',')
	form.value.teachingTime = (data.teachingTime as string).split('-')
}

/* 老师表单 */
const teachDialogVisible = ref(false)
const targetTeach = ref('')
const btnDialog = (target: string) => {
	teachDialogVisible.value = true
	targetTeach.value = target
}
const onAddSuccessUser = (val) => {
	form.value[`${targetTeach.value}Id`] = val.id
	form.value[`${targetTeach.value}Username`] = val.username
}

/* 确认按钮 */
// 提交数据
const postRoleData = async () => {
	const { code } = await postClassAOUApi(form.value)
	if (code !== '200') return

	ElMessage.success(form.value.id ? '修改班级成功~' : '添加班级成功~')
	dialogVisible.value = false

	// 通知父组件
	emits('addSuccess')
}
// 点击确认按钮
const onSubmit = () => {
	// 将选中的时间赋值给表单数据
	[form.value.beginDate, form.value.endDate] = form.value.chooseDays
	form.value.teachingDay = (form.value.teachingDay as []).join(',')
	form.value.teachingTime = (form.value.teachingTime as []).join('-')

	postRoleData()
}

watch(dialogVisible, () => {
	if (dialogVisible.value) {
		// 打开 dialog 时获取数据
		props.id && getFormData()
		getSubjectData()
	} else {
		// 关闭 dialog 时清空数据
		form.value = formValue()
	}
})
</script>

<style scoped lang="scss"></style>